<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '抄送人设置',
			size: '500px',
			appendToBody: true,
			closeOnClickModal: false
		}"
		:before-close="saveCopyer"
		show-confirm
		@confirm="saveCopyer"
		@close="closeDrawer"
	>
		<el-form label-position="top">
			<!-- <el-form-item label="所属事业部">
				<cl-select
					v-model="copyerConfig.biz_id"
					placeholder="请选择"
					filterable
					@change="changeBiz"
					style="width:100%"
				>
					<el-option
						v-for="item in business"
						:key="item.biz_id"
						:label="item.biz_name"
						:value="item.biz_id"
					/>
				</cl-select>
			</el-form-item> -->
			<!-- <el-form-item label="允许发起人自选抄送人">
				<el-switch v-model="ccSelfSelectFlag" :active-value="1" :inactive-value="0" />
			</el-form-item> -->
			<el-form-item label="抄送人">
				<select-employees v-model="copyerConfig.nodeUserList" />
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import { mapGetters } from "vuex";
import funcMixin from "./func.js";
import SelectEmployees from "./select-employees";

export default {
	mixins: [funcMixin],
	components: {
		SelectEmployees
	},
	data() {
		return {
			copyerConfig: {}
		};
	},
	computed: {
		...mapGetters({
			copyerConfig1: "flowDesignCopyerConfig",
			copyerDrawer: "flowDesignCopyerDrawer"
		}),
		checkedNodeUserList() {
			const { nodeUserList } = this.copyerConfig;
			return nodeUserList || [];
		},
		checkedNodeUser() {
			const { value } = this.copyerConfig1;
			return (value?.nodeUser || []).map(Number);
		}
	},
	watch: {
		copyerConfig1: {
			deep: true,
			handler(v) {
				this.copyerConfig = {
					biz_id: this.getCurrBiz(),
					operateType: [],
					...v?.value,
					ccSelfSelectFlag: 0,
					nodeUser: [...this.checkedNodeUser]
					// operateType: v?.value?.operateType || []
				};
			}
		},
		copyerDrawer(v) {
			this.toggle(v);
		}
	},
	methods: {
		toggle(v) {
			this[v ? "open" : "close"]();
		},
		open() {
			this.$refs.drawer.create();
		},
		close() {
			this.$refs.drawer.close();
		},
		changeBiz() {
			this.copyerConfig.nodeUserList = [];
			this.copyerConfig.nodeUser = [];
		},
		saveCopyer() {
			let { nodeUserList, ...args } = this.copyerConfig;
			let config = {
				...args,
				nodeUserList,
				nodeUser: nodeUserList.map(v => v.user_id)
			};
			config.error = !this.copyerStr(config);
			this.$store.commit("updateCopyerConfig", {
				value: config,
				flag: true,
				id: this.copyerConfig1.id
			});
			this.closeDrawer();
		},
		closeDrawer() {
			this.$store.commit("updateCopyer", false);
		}
	}
};
</script>
